<template>
  <section class="topic-section">
    <ul class="topic-list">
      <li v-for="(item, index) in articleList" :key="index" class="topic-info">
        <img :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`" style="border-radius: 5px;" class="avatar">
        <div class="topic-content">
          <div class="topic-title">
            <router-link :to="{name:'post-detail',params:{id:item.id}}">
              <span>{{ item.title }}</span>
            </router-link>
          </div>
          <div class="topic-detail">
            <router-link class="topic-author" :to="{ path: `/member/${item.username}/home` }">
              {{ item.alias }}
            </router-link>
            <span class="topic-date">
                            发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
            </span>
            <span
                v-for="(tag, index) in item.tags"
                :key="index"
                class="topic-tag"
            >
                  <router-link :to="{ name: 'tag', params: { name: tag.name } }">
                    {{ "#" + tag.name }}
                  </router-link>
            </span>

            <span class="topic-view-count">
                            浏览:{{ item.view }}
            </span>
          </div>
        </div>
      </li>
    </ul>
    <!--分页-->
    <pagination
        v-show="page.total > 0"
        :total="page.total"
        :page.sync="page.current"
        :limit.sync="page.size"
        @pagination="init"
    />
  </section>
</template>

<script>
import { getList } from '@/api/post'
import Pagination from '@/components/Pagination'
export default {
  name: 'TopicList',
  components: { Pagination },
  data() {
    return {
      articleList: [],
      page: {
        current: 1,
        size: 10,
        total: 0,
        tab: 'latest'
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getList(this.page.current, this.page.size, 'latest').then((response) => {
        const { data } = response
        this.page.current = data.current
        this.page.total = data.total
        this.page.size = data.size
        this.articleList = data.records
      })
    },
  }
}
</script>

<style scoped>
.topic-section{
  background-color: #fff;
  flex: 4;
  padding: 6px;
}

.topic-info{
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  border-bottom: 1px solid rgba(219, 219, 219, 0.5);
}

img.avatar{
  width: 32px;
  height: 32px;
}

.topic-content{
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

@media (max-width: 768px) {
  /*.wrapper .header{*/
  /*  width: 100%;*/
  /*}*/
  /*.container {*/
  /*  width: 100%;*/
  /*  display: block;*/
  /*  margin: auto;*/
  /*  margin-top: 64px;*/
  /*}*/
  .topic-section{
    background-color: #fff;
    width: 100%;
  }
  /*.right-side{*/
  /*  margin-top: 5%;*/
  /*  width: 100%;*/
  /*}*/
}
</style>
